<template>
	<div class="album-papers maxW">
		<div class="paper-head clear">
			<span class="back" @click="back">返回</span>
			<strong><i>> 试卷详情</i></strong>
			<el-button class="fr" type="text" @click="dialogVisible = true">下载</el-button>
		</div>
		<div class="paper-title">
			<h1 class="paper-name">{{ paperData.name }}</h1>
			<p>
				满分
				<i class="paper-score">25</i>
				分
			</p>
		</div>
		<div class="question-box" v-for="(item, index) of paperData.question_type" :key="index">
			<div class="question-num">
				<span>
					<i>{{ item.cn_num }} .</i>
					{{ item.question_type }}（{{ item.count }}题，共{{ item.score }}分）
				</span>
			</div>
			<ul class="content-ul">
				<li v-for="(item1, index1) of question_list" :key="index1">
					<template v-if="item.id == item1.qt_id">
						<div class="question">
							<div class="question-title">
								<i>{{ index1 + 1 }}、</i>
								<span v-html="item1.content"></span>
							</div>
							<ul>
								<li class="choose-option" v-for="(item2, index2) of item1.option" :key="index2">
									<i>{{ item2.name }}.</i>
									<span v-html="item2.value"></span>
								</li>
							</ul>
						</div>
						<div class="analysis-tool clear">
							<div class="answer-level fl">
								<span>难度 : {{ item1.difficulty }}</span>
								<span class="i_score">（{{ item1.score }}分）</span>
							</div>
							<el-button class="checkingBtn fr" type="text" @click="checkingAnalysis(item1, index1)" v-html="item1.isActive ? '关闭解析' : '查看解析'"></el-button>
						</div>
						<el-collapse-transition>
							<div class="analysis-box" v-show="item1.isActive">
								<ul>
									<li class="analysis-answer">
										<span class="answer-tip">答案</span>
										<p>
											<span v-for="item3 of item1.answer" :key="item3">{{ item3 }}</span>
										</p>
									</li>
									<li class="analysis-count">
										<span class="answer-tip">统计</span>
										<p>本题共被作答{{ item1.question_info.answer_count }}次，正确率为{{ item1.question_info.true_probability }}%</p>
									</li>
									<li class="answer-analysis">
										<span class="answer-tip">解析</span>
										<span v-html="item1.resolve"></span>
									</li>
								</ul>
							</div>
						</el-collapse-transition>
					</template>
				</li>
			</ul>
		</div>
		<el-dialog class="downLoadDialog" title="下载试卷" width="550px" :visible.sync="dialogVisible">
			<div class="downloadBox">
				<ul>
					<li class="download clear">
						<span class="download-title">类型</span>
						<template>
							<el-radio-group v-model="radio1">
								<el-radio label="word">word</el-radio>
								<el-radio label="pdf">pdf</el-radio>
							</el-radio-group>
						</template>
					</li>

					<li class="download clear">
						<span class="download-title">模板</span>
						<template>
							<el-radio-group v-model="radio2">
								<el-radio label="A4">A4纸竖排</el-radio>
								<el-radio label="A5">A3纸竖排</el-radio>
							</el-radio-group>
						</template>
					</li>
					<li class="download clear">
						<span class="download-title">答案</span>
						<template>
							<el-radio-group v-model="radio3">
								<el-radio label="follow">试题后面紧跟答案</el-radio>
								<el-radio label="separate">试题和解析分离</el-radio>
								<el-radio label="only_test">只下载试卷</el-radio>
								<el-radio label="only_answer">只下载答案</el-radio>
							</el-radio-group>
						</template>
					</li>
				</ul>
				<div class="download-btns">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="sureDownLoad">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			paperData: {},
			question_list: [],
			answer_id: null,
			dialogVisible: false,
			radio1: 'word',
			radio2: 'A4',
			radio3: 'follow'
		};
	},
	created() {
		this.getPaperData();
	},
	methods: {
		// 获取试卷数据
		getPaperData() {
			let success = res => {
				this.paperData = res.data;
				this.question_list = this.addShowFlag(res.data.question_list);
			};
			this.$ajax({
				url: 'api/test/test_detail',
				method: 'get',
				params: {
					id: this.$route.query.id,
					userid: this.$g.user_id
				},
				func: { success: success }
			});
		},
		// 查看解析按钮
		checkingAnalysis(item1, index1) {
			//实现没个查看解析的独立显示/隐藏
			//此处写法解决vue 数组内对象修改属性页面不渲染问题
			this.$set(this.question_list[index1], 'isActive', !item1.isActive);
			this.$forceUpdate(); //强制刷新
		},
		//给数组添加一个isActive:false的键值对
		addShowFlag(_arr) {
			if (!is_empty(_arr)) {
				for (let i = 0; i < _arr.length; i++) {
					_arr[i].isActive = false;
				}
				return _arr;
			} else {
				return _arr;
			}
		},
		sureDownLoad() {
			window.location.href =
				this.BASE_URL + '/index/test/download_test?id=' + this.$route.query.id + '&format=' + this.radio1 + '&template=' + this.radio2 + '&answer=' + this.radio3;
		},
		//返回专辑详情
		back() {
			this.$router.go(-1);
			// this.$router.push({path: "/home/albumDetail", query: {id: this.$route.query.id}});
		}
	}
};
</script>
<style lang="scss">
.album-papers {
	margin-top: 20px;
	margin-bottom: 40px;
	background-color: #fff;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	.paper-head {
		height: 40px;
		line-height: 40px;
		padding: 1.8% 4%;
		border-bottom: 1px solid #e0e0e0;
		.back {
			font-size: 14px;
			color: #333;
			cursor: pointer;
		}
		strong {
			color: #999;
		}
		i {
			padding: 0 5px;
			font-family: 'Simsun';
		}
	}
	.paper-title {
		text-align: center;
		margin: 30px 0;
		.paper-name {
			font-size: 18px;
			margin-bottom: 15px;
			line-height: 24px;
		}
		.paper-score {
			color: #666;
		}
	}
	.question-box {
		.question-num {
			background: #e5f1ff;
			font-size: 14px;
			height: 36px;
			line-height: 36px;
			padding: 0 4%;
			span {
				color: #333;
			}
		}
		.question {
			padding: 20px 4%;
		}
		.question-title {
			font-size: 14px;
			line-height: 30px;
			p {
				display: inline;
			}
		}
		.choose-option {
			font-size: 14px;
			line-height: 30px;
			p {
				display: inline;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
		.analysis-tool {
			background: #f9f9f9;
			height: 36px;
			line-height: 36px;
			padding: 0 4%;
			font-size: 12px;
			overflow: hidden;
			.answer-level {
				span {
					color: #333;
				}
				span:nth-child(1):after {
					content: '';
					display: inline-block;
					vertical-align: middle;
					width: 1px;
					height: 12px;
					background: #979797;
					margin: 0 20px;
				}
				.i_score {
					font-size: 14px;
					color: #e1b223;
				}
			}
		}
	}

	.analysis-box {
		transition: height 0.5s;
		box-sizing: border-box;
		padding: 0 4%;
		background-color: rgba(249, 249, 249, 0.4);
		border-top: 1px dashed rgba(204, 204, 204, 0.4);
		border-bottom: 1px dashed rgba(204, 204, 204, 0.4);
		li {
			line-height: 30px;
			font-size: 14px;
			.answer-tip {
				display: inline-block;
				width: 60px;
				color: #666;
			}
			p {
				display: inline;
			}
		}
		.analysis-answer {
			p {
				color: #348efc;
				span {
					margin: 0 5px;
				}
			}
		}
	}

	.downLoadDialog {
		.el-dialog__header {
			background-color: #338efc;
			padding: 10px 20px 8px;
		}
		.el-dialog__body {
			padding: 30px 20px 10px;
		}
		.el-dialog__title {
			color: #fff;
			font-size: 14px;
		}
		.el-dialog__headerbtn {
			top: 12px;
		}
		.el-dialog__headerbtn .el-dialog__close {
			color: #000;
			font-size: 20px;
		}
		.el-dialog__headerbtn .el-dialog__close:hover {
			color: rgba(255, 255, 255, 0.8);
		}
		.codeInput {
			width: 67%;
			margin-right: 10px;
		}
		.getCodeBtn {
			width: 112px;
			padding: 12px 10px;
		}
		.downloadBox {
			.download {
				line-height: 46px;
				border-bottom: 1px solid #e0e0e0;
				.download-title {
					display: block;
					float: left;
					line-height: 46px;
					color: #666666;
					width: 80px;
				}
			}
		}
		.el-radio-group {
			width: 426px;
			.el-radio__input {
				display: none;
			}
			.el-radio {
				width: 150px;
				line-height: 46px;
				float: left;
				margin-left: 0;
			}
		}
	}
	.download-btns {
		height: 80px;
		line-height: 80px;
		text-align: center;
		.el-button {
			width: 102px;
			height: 30px;
			padding: 0;
		}
	}
}
</style>
